<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/resent.css">
    <link rel="stylesheet" href="./css/style.css">
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="todolist">
        <div class="header">
            <div class="logo">ToDoList</div>
            <input type="text" id="title" placeholder="添加ToDo" v-model="inputvalue" @keyup.enter="add">
            <input type="text" id="search" placeholder="搜索ToDo" v-model="txt" @keyup.enter="search">
            <button class="sou" @click="search">搜索</button>
        </div>
        <div class="content">
            <div class="undone">
                <h2>正在进行
                    <!-- <span id="todocount">{{todolen}}</span> -->
                </h2>
                <ol id="undone-list" class="demo-box" >
                        <li v-for="(item,index) in getlist" :key="item._id" v-if="item.done===false">
                        <input type="checkbox" @click="item.done=true" v-model="item.done" >
              
                        {{item.text }} 
                        <!-- {{item._id}} -->
                        <button class="edit" @click="edit(item)">编辑</button>
                        <button @click="del(item._id)" class="del">x</button>
                        </li>
                </ol>
                <!-- 分页 -->
                <ul style="display: flex">
                    <li :class="{active:n===pageno}" v-for="n in getpages" class="page"  @click="changepage(n)">{{n}}</li>
                </ul>
                <!-- 分页结束 -->
            </div>
           <div class="done">
            <h2>已经完成
                <!-- <span id="todocount">0</span> -->
            </h2>
            <ul id="done-list">
                <li v-for="(item,index) in getlist" :key="item._id" v-if="item.done===true">
                <input type="checkbox"  checked='checked' @click="deldone" v-model="item.done">
                {{item.text }}
                <button class="edit" @click="edit(item)">编辑</button>
                <button @click="del(item._id)" class="del">x</button>
                </li>
            </ul>
           </div>
        </div>

        <custom-dialog v-if="isShowEdit" :pos="position" @updateevent="update" @close="isShowEdit=false"></custom-dialog>
        <!-- <custom-dialog v-if="isShowEdit" :pos="position" @updateevent="update" @close="isShowEdit=false"></custom-dialog> -->
    </div>
    <script type="text/template" id="temp">
        <div class="mask">
            <div class="dialog">
                内容：
                <input type="text" class="change" v-model="position.text"><br>
                <button @click="submit">提交</button>
                <button @click="$emit('close')">取消</button>
            </div>
        </div>
    </script>
    <script>
        // 编辑组件
        Vue.component('custom-dialog',{
            props:['pos'],
            data(){
                return {
                   position:{}
                }
            },
            mounted(){ 
                this.position = Object.assign({},this.pos)
            },
            template:`#temp`,
            methods: {
                submit() {
                    this.$emit('updateevent', this.position)
                }
            },
            methods:{
                submit(){
                    this.$emit('updateevent',this.position)
                }
            }

        })

        var vm = new Vue({
            el:"#todolist",
            data:{
                todolen:0,
                inputvalue:'',
                list:[
                    // {
                    //     text:"吃饭",
                    //     _id: new Date().getTime()
                    // }
                ],
                bolist:[],
                // 分页
                pagesize:6,
                pageno:1,
                // 搜索框输入的文字
                txt:'',
                keyword:'',
                // 是否显示修改框
                isShowEdit:false,
                // 编辑时，需要读取的数据
                position:{}
            },
            computed:{
                getpages(){
                    // 模糊查询
                    let list1=this.list.filter((item,index)=>{ 
                        // return item.text.indexOf(this.keyword)>-1
                        var reg = new RegExp(this.keyword,'i');
                        return reg.test(item.text);
                    });
                    return Math.ceil(list1.length/this.pagesize)
                    
                },
                getlist(){
                    // 模糊查询
                    let list1=this.list.filter((item,index)=>{
                        // return item.text.indexOf(this.keyword)>-1
                        var reg = new RegExp(this.keyword,'i');
                        return reg.test(item.text);
                    });
                    let startindex=(this.pageno-1)*this.pagesize;
                    let endindex=startindex+this.pagesize;
                    return list1.slice(startindex,endindex)
                }
            },
            methods:{
                add() {
                    this.list.push({
                        text: this.inputvalue,
                        _id:new Date().getTime(),
                        done:false
                    });
                    this.inputvalue = '';
                    this.todolen++;
                },
                // 删除数据
                del(id){
                    this.list.forEach((item,index)=>{
                        if(item._id===id){
                            this.list.splice(index,1)
                            this.bolist.splice(index,1)
                        }
                    })
                },
                // 页码
                changepage(n){
                    this.pageno=n;
                },
                // 搜索
                search(){
                    this.pageno=1;
                    this.keyword=this.txt;
                },
                // 编辑对话框
                edit(item){
                    this.isShowEdit=true;
                    this.position=item;
                },
                // 数据更新
                     //数据更新
                update(pos) {
                    this.list.find((item, index) => {
                        if (pos._id === item._id) {
                            this.list.splice(index, 1, pos)
                            return true;
                        }
                    })
                //   console.log(pos);
                this.isShowEdit = false;

        },
                // 切换状态
                deldone(){
				  this.list.push(this.text);
				 
				},

            }
        })
    </script>
</body>
</html>